<template>
  <el-container style="height: 100vh; border: 1px solid #eee; overflow: hidden">
    <el-main>
      <div class="user">
        <div class="hm-search">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="m-search">
            <el-input
              placeholder="请输入内容"
              v-model="params.query"
              @keyup.enter="searchGoodsFn"
            >
            <template #append>
              <el-button
                icon="el-icon-search"
                @click="searchGoodsFn"
              ></el-button>
            </template>
            </el-input>
          </div>
          <div class="m-primary">
            <el-button type="success" plain @click="addroute"
              >添加商品</el-button
            >
          </div>
        </div>
        <div class="goods-tab">
          <el-table :data="goodsData.goods" border style="width: 100%">
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="goods_price" label="商品价格(元)">
            </el-table-column>
            <el-table-column prop="goods_weight" label="商品重量">
            </el-table-column>
            <el-table-column
              prop="upd_time"
              label="创建日期"
              :formatter="dateFormat"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="showEditFn(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delectGoodsFn(scope.row.goods_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:currentPage="params.pagenum"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="goodsData.total"
          >
          </el-pagination>
        </div>
        <el-dialog title="编辑商品" v-model="exidDialogFrom">
          <el-form :model="editInfoForm" ref="exidFrom">
            <el-form-item
              label="商品名称"
              :label-width="formLabelWidth"
              prop="goods_name"
              :rules="[
                { required: true, message: '请输入商品', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="editInfoForm.goods_name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品价格"
              :label-width="formLabelWidth"
              prop="goods_price"
              :rules="[
                { required: true, message: '请输入商品', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="editInfoForm.goods_price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品数量"
              :label-width="formLabelWidth"
              prop="goods_number"
              :rules="[
                { required: true, message: '请输入商品', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="editInfoForm.goods_number"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品重量"
              :label-width="formLabelWidth"
              prop="goods_weight"
              :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
            >
              <el-input
                v-model="editInfoForm.goods_weight"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品参数"
              :label-width="formLabelWidth"
              prop="goods_cat"
              :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
            >
              <el-input
                v-model="editInfoForm.goods_cat"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="exidDialogFrom = false">取 消</el-button>
              <el-button type="primary" @click="editGoodsFn()">确 定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { ElMessageBox, ElMessage } from "element-plus";
import { reactive, getCurrentInstance, onMounted, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { getGoods, editGoods, delectGoods, seeGoods } from "../../http/api.js";
export default {
  setup() {
    // const {proxy}=getCurrentInstance()
    const router = useRouter();
    let goodsData = reactive({});
    let exidDialogFrom = ref(false);
    let formLabelWidth = "120px";
    let params = reactive({
      pagenum: router.pagenum || 1,
      pagesize: router.pagesize ||30,
      query: router.query || "",
    });
    let editInfoForm = reactive({
      goods_id: null,
      goods_name: "",
      goods_price: "",
      goods_number: "",
      goods_weight: "",
      goods_introduce: "",
      goods_cat: "",
    });
    //获取商品列表
    const getGoodsFn = async () => {
      const res = await getGoods(params);
      Object.assign(goodsData, res);
    };
    //点击编辑展示回显信息
    const showEditFn = async (row) => {
      // console.log(row)
      const res = await seeGoods(row.goods_id);
      const {
        goods_id,
        goods_name,
        goods_price,
        goods_number,
        goods_weight,
        goods_cat,
        goods_introduce,
      } = res;
      editInfoForm.goods_id = goods_id;
      editInfoForm.goods_name = goods_name;
      editInfoForm.goods_price = goods_price;
      editInfoForm.goods_weight = goods_weight;
      editInfoForm.goods_number = goods_number;
      editInfoForm.goods_cat = goods_cat;
      editInfoForm.goods_introduce = goods_introduce;
      exidDialogFrom.value = true;
    };
    //点击编辑提交
    const editGoodsFn = async () => {
      console.log(111);
      await editGoods(editInfoForm.goods_id, editInfoForm);
      exidDialogFrom.value = false;
      getGoodsFn();
    };
    //点击删除
    const delectGoodsFn = (id) => {
      ElMessageBox.confirm(
        "proxy will permanently delete the file. Continue?",
        "Warning",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning",
        }
      )
        .then(async() => {
           await delectGoods(id);
         getGoodsFn()
          
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };
    //每页的条数
   const handleSizeChange=(val)=>{
      params.pagesize=val
      router.push({
        query:Object.assign({},router.query,{
          query:params.query
        })
        
      })
      getGoodsFn();
    }
    //搜索商品
    const searchGoodsFn=()=>{
      router.push({
        query:Object.assign({},router.query,{
          query:params.query
        })
         })
      getGoodsFn();
    }
      //当前是第几页
   const  handleCurrentChange=(val)=>{
      params.pagenum=val
      router.push({
        query:Object.assign({},router.query,{
          query:params.query
        })
         })
      getGoodsFn();
    }
    //日期转化
    const dateFormat=(row, column) =>{
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
    //点击添加商品
   const  addroute= ()=>{
     router.push({
       name:"Addgoods"
     })
   }
    onMounted(() => {
      getGoodsFn();
    });
    return {
      goodsData,
      params,
      getGoodsFn,
      showEditFn,
      exidDialogFrom,
      editInfoForm,
      editGoodsFn,
      formLabelWidth,
      delectGoodsFn,
      dateFormat,
      handleSizeChange,
      handleCurrentChange,
      searchGoodsFn,
      addroute
    };
  },
};
</script>
<style scoped lang="scss">
.m-search {
  float: left;
  width: 250px;
  margin-top: 15px;
}
.m-primary {
  float: left;
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
a {
  text-decoration: none;
  color: #333;
}
.hm-search {
  height: 70px;
}
.el-main {
  background-color: #eee;
}
.user {
  background-color: #fff;
  padding: 15px;
}
.goods-tab {
  width: 100%;
  padding: 15px;
  border-color: #fff;
  border-radius: 5px;
  height: calc(100vh - 160px);
  box-sizing: border-box;
  overflow-x: auto;
}
</style>